:root {
  --tooltip-opacity: 0.9;
  --tooltip-border-radius: 4px;
  --tooltip-font-size: 14px;
  --tooltip-padding: 8px 16px;
  --tooltip-offset: 10px;
  --tooltip-default-color: #616161;
  --tooltip-primary-color: var(--color-primary);
  --tooltip-info-color: var(--color-info);
  --tooltip-success-color: var(--color-success);
  --tooltip-warning-color: var(--color-warning);
  --tooltip-danger-color: var(--color-danger);
  --tooltip-default-text-color: #fff;
  --tooltip-primary-text-color: var(--color-on-primary);
  --tooltip-info-text-color: var(--color-on-info);
  --tooltip-success-text-color: var(--color-on-success);
  --tooltip-warning-text-color: var(--color-on-warning);
  --tooltip-danger-text-color: var(--color-on-danger);
}

.var-tooltip {
  display: inline-block;

  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: scale(0.8);
  }

  &-enter-active,
  &-leave-active {
    transition-property: opacity, transform;
    transition-duration: 0.2s;
  }

  &__content-container {
    display: inline-block;
    text-align: center;
    border-radius: var(--tooltip-border-radius);
    font-size: var(--tooltip-font-size);
    padding: var(--tooltip-padding);
    opacity: var(--tooltip-opacity);
    transition: opacity 0.25s, background-color 0.25s;
  }

  &--default {
    color: var(--tooltip-default-text-color);
    background: var(--tooltip-default-color);
  }

  &--primary {
    color: var(--tooltip-primary-text-color);
    background-color: var(--tooltip-primary-color);
  }

  &--info {
    color: var(--tooltip-info-text-color);
    background-color: var(--tooltip-info-color);
  }

  &--success {
    color: var(--tooltip-success-text-color);
    background-color: var(--tooltip-success-color);
  }

  &--warning {
    color: var(--tooltip-warning-text-color);
    background-color: var(--tooltip-warning-color);
  }

  &--danger {
    color: var(--tooltip-danger-text-color);
    background-color: var(--tooltip-danger-color);
  }

  &__tooltip[data-popper-placement='top'] &__content-container,
  &__tooltip[data-popper-placement='top-start'] &__content-container,
  &__tooltip[data-popper-placement='top-end'] &__content-container {
    transform: translateY(calc(-1 * var(--tooltip-offset)));
  }

  &__tooltip[data-popper-placement='bottom'] &__content-container,
  &__tooltip[data-popper-placement='bottom-start'] &__content-container,
  &__tooltip[data-popper-placement='bottom-end'] &__content-container {
    transform: translateY(var(--tooltip-offset));
  }

  &__tooltip[data-popper-placement='right'] &__content-container,
  &__tooltip[data-popper-placement='right-start'] &__content-container,
  &__tooltip[data-popper-placement='right-end'] &__content-container {
    transform: translateX(var(--tooltip-offset));
  }

  &__tooltip[data-popper-placement='left'] &__content-container,
  &__tooltip[data-popper-placement='left-start'] &__content-container,
  &__tooltip[data-popper-placement='left-end'] &__content-container {
    transform: translateX(calc(-1 * var(--tooltip-offset)));
  }
}
